<template>
	<view class="container">
		<!-- 顶部搜索栏：支持按备注、宠物名、主人名、日期搜索日程 -->
		<view class="search-container">
			<view class="search-box">
				<uni-icons type="search" size="18" color="#999"></uni-icons>
				<input type="text" placeholder="搜索日程（备注/日期/宠物名）" v-model="searchKey" @input="handleSearch"
					class="search-input" />
			</view>
		</view>

		<!-- 筛选栏：优化为下拉框筛选状态 -->
		<view class="filter-bar">
			<!-- 状态筛选：下拉框形式 -->
			<view class="status-filter-box">
				<uni-icons type="list" size="16" color="#666" class="icon-mr"></uni-icons>
				<picker @change="handleStatusChange" :value="statusFilterIndex" :range="statusOptions"
					class="status-picker">
					<view class="picker-display">
						{{ statusOptions[statusFilterIndex] }}
						<uni-icons type="down" size="14" color="#666" class="down-icon"></uni-icons>
					</view>
				</picker>
			</view>
		</view>

		<!-- 日程列表：展示日程信息，包含宠物、主人、日期、状态等 -->
		<view class="schedule-list">
			<view class="schedule-item" v-for="(item, index) in filteredSchedules" :key="item.scheduleId">
				<!-- 日程头部：日期和状态标签 -->
				<view class="item-header">
					<view class="item-date">{{ formatDate(item.scheduleDate) }}</view>
					<view class="item-status" :class="item.status == 0 ? 'status-pending' : 'status-completed'">
						{{ item.status == 0 ? '待处理' : '已完成' }}
					</view>
				</view>

				<!-- 日程内容：宠物信息（名称+品种）、备注 -->
				<view class="item-content">
					<view class="pet-info">
						<uni-icons type="pet" size="18" color="#42b983" class="icon-mr"></uni-icons>
						<text>宝贝：{{ petMap[item.petId]?.name || '未知宠物' }}（{{ petMap[item.petId]?.breed || '未知品种' }}）</text>
					</view>
					<view class="notes">
						<uni-icons type="clipboard" size="18" color="#42b983" class="icon-mr"></uni-icons>
						<text>备注：{{ item.notes || '无备注' }}</text>
					</view>
				</view>

				<!-- 日程底部：操作按钮 -->
				<view class="item-footer">
					<view class="item-actions">
						<button class="action-btn edit-btn" @click="handleEdit(item)">编辑</button>
						<button class="action-btn status-btn" @click="handleToggleStatus(item)">
							{{ item.status == 0 ? '标记完成' : '取消完成' }}
						</button>
					</view>
				</view>
			</view>

			<!-- 空状态：无日程时的提示 -->
			<view class="empty-state" v-if="filteredSchedules.length === 0">
				<uni-icons type="empty" size="60" color="#ccc"></uni-icons>
				<text class="empty-text">暂无日程提醒</text>
				<text class="empty-desc">点击下方按钮添加新日程</text>
			</view>
		</view>

		<!-- 添加日程按钮：跳转添加页 -->
		<button class="add-btn" @click="handleAdd">
			<uni-icons type="plus" size="24" color="#fff"></uni-icons>
		</button>

	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import petScheduleApi from '@/api/Schedule.js'; // 导入封装的日程API
	import userManager from '@/common/utils/user.js'; //导入user的信息

	// 响应式数据定义
	const scheduleList = ref([]); // 存储原始日程列表数据
	const searchKey = ref(''); // 搜索关键词（支持备注、日期、宠物名、主人名）
	const selectedDate = ref(''); // 日期选择器选中的日期
	const statusFilter = ref(''); // 状态筛选值（''=全部，'0'=待处理，'1'=已完成）
	const userId = ref(userManager.getUserInfo()?.userId || '');
	const ownerId = ref(''); // 宠物主人ID（实际需从缓存/登录态获取）
	const petMap = ref({}); // 宠物信息映射表 { [petId]: PetInfo }
	const ownerMap = ref({}); // 主人信息映射表 { [ownerId]: OwnerInfo }

	// 状态筛选配置：下拉框选项和当前选中索引
	const statusOptions = ['全部状态', '待处理', '已完成']; // 下拉框显示文本
	const statusFilterIndex = ref(0); // 下拉框默认选中“全部状态”
	const statusValueMap = ['', 0, 1]; // 选项对应的实际状态值（与statusOptions索引对应）

	// 页面挂载时加载数据
	onMounted(() => {
		fetchSchedulesWithRelations();
	});

	// 页面每次显示时（包括从其他页面返回）自动刷新
	onShow(() => {
		fetchSchedulesWithRelations();
	});


	// 计算属性：多条件筛选日程（搜索+日期+状态）
	const filteredSchedules = computed(() => {
		return scheduleList.value.filter(item => {
			// 1. 搜索筛选：匹配备注、日期（格式化后）、宠物名、主人名
			const formattedScheduleDate = formatDate(item.scheduleDate); // 统一日期格式用于匹配
			const matchSearch = !searchKey.value ||
				(item.notes && item.notes.includes(searchKey.value)) ||
				(formattedScheduleDate && formattedScheduleDate.includes(searchKey.value)) ||
				(petMap.value[item.petId]?.name && petMap.value[item.petId].name.includes(searchKey
					.value)) ||
				(ownerMap.value[item.ownerId]?.nickName && ownerMap.value[item.ownerId].nickName.includes(
					searchKey.value));

			// 2. 日期选择器筛选：选中日期与日程日期完全匹配
			const matchDatePicker = !selectedDate.value || formattedScheduleDate === selectedDate.value;

			/**
			 * 加载日程列表及关联的宠物、主人信息
			 */
			const fetchSchedulesWithRelations = async () => {
				try {
					console.log(userId.value);
					const UserRes = await petScheduleApi.getUserById(userId.value);
					console.log(UserRes);
					if (UserRes.data.code === 200) {
						ownerId.value = UserRes.data.data.petOwnerId;
					}
					if (ownerId.value != null) {
						// 获取当前主人的所有日程
						const scheduleRes = await petScheduleApi.getByOwnerId(ownerId.value);
						if (scheduleRes.data.code !== 200 || !scheduleRes.data.data) {
							uni.showToast({
								title: '获取日程列表失败',
								icon: 'none'
							});
							return;
						}
						scheduleList.value = scheduleRes.data.data;
						if (scheduleList.value.length === 0) return; // 无日程时直接返回，避免后续无效请求
						// 提取去重的宠物ID和主人ID（仅获取当前列表中存在的ID，无需额外处理未缓存）
						const petIds = [...new Set(scheduleList.value.map(item => item.petId)
							.filter(id => id))];
						const ownerIds = [...new Set(scheduleList.value.map(item => item.ownerId)
							.filter(id => id))];

						// 批量获取宠物信息（直接覆盖/存储，无需判断是否已缓存，简化逻辑）
						await Promise.all(petIds.map(async (petId) => {
							const petRes = await petScheduleApi.getPetById(petId);
							if (petRes.data.code === 200) {
								petMap.value[petId] = petRes.data.data;
							}
						}));
					}

				} catch (err) {
					uni.showToast({
						title: '加载数据失败',
						icon: 'none'
					});
					console.error('加载失败：', err);
				}
			};


			// 3. 状态筛选：仅显示选中状态的日程（全部状态时不筛选）
			const matchStatus = statusFilter.value === '' || item.status === statusFilter.value;

			return matchSearch && matchDatePicker && matchStatus;
		});
	});

	/**
	 * 加载日程列表及关联的宠物、主人信息
	 */
	const fetchSchedulesWithRelations = async () => {
		try {
			console.log(userId.value);
			const UserRes = await petScheduleApi.getUserById(userId.value);
			console.log(UserRes);
			if (UserRes.data.code === 200) {
				ownerId.value = UserRes.data.data.petOwnerId;

				// 获取当前主人的所有日程
				const scheduleRes = await petScheduleApi.getByOwnerId(ownerId.value);
				if (scheduleRes.data.code !== 200 || !scheduleRes.data.data) {
					uni.showToast({
						title: '获取日程列表失败',
						icon: 'none'
					});
					return;
				}
				scheduleList.value = scheduleRes.data.data;
				if (scheduleList.value.length === 0) return; // 无日程时直接返回，避免后续无效请求

				// 提取去重的宠物ID和主人ID（仅获取当前列表中存在的ID，无需额外处理未缓存）
				const petIds = [...new Set(scheduleList.value.map(item => item.petId).filter(id => id))];
				const ownerIds = [...new Set(scheduleList.value.map(item => item.ownerId).filter(id => id))];

				// 批量获取宠物信息（直接覆盖/存储，无需判断是否已缓存，简化逻辑）
				await Promise.all(petIds.map(async (petId) => {
					const petRes = await petScheduleApi.getPetById(petId);
					if (petRes.data.code === 200) {
						petMap.value[petId] = petRes.data.data;
					}
				}));
			}
		} catch (err) {
			uni.showToast({
				title: '加载数据失败',
				icon: 'none'
			});
			console.error('加载失败：', err);
		}
	};

	/**
	 * 状态筛选下拉框变化事件
	 * @param {Object} e - 下拉框选择事件对象
	 */
	const handleStatusChange = (e) => {
		const selectedIndex = e.detail.value;
		statusFilterIndex.value = selectedIndex;
		statusFilter.value = statusValueMap[selectedIndex]; // 同步状态筛选值
	};



	/**
	 * 切换日程完成状态
	 * @param {Object} item - 当前操作的日程项
	 */
	const handleToggleStatus = async (item) => {
		try {
			const newStatus = item.status === 0 ? 1 : 0;
			const updateData = {
				status: newStatus
			};
			const res = await petScheduleApi.update(item.scheduleId, updateData);

			if (res.data.code === 200) {
				item.status = newStatus;
				uni.showToast({
					title: newStatus === '1' ? '已标记完成' : '已取消完成',
					icon: 'success'
				});
			}
		} catch (err) {
			uni.showToast({
				title: '操作失败',
				icon: 'none'
			});
			console.error('更新状态失败：', err);
		}
	};

	// 搜索输入触发（依赖computed自动筛选，无需额外逻辑）
	const handleSearch = () => {};

	// 跳转编辑页
	const handleEdit = (item) => {
		uni.navigateTo({
			url: `/pages/schedule/edit/edit?scheduleId=${item.scheduleId}`
		});
	};

	// 跳转添加页（返回后刷新数据）
	const handleAdd = () => {
		uni.navigateTo({
			url: `/pages/schedule/add/add?ownerId=${ownerId.value}`,
			events: {
				refreshSchedule: () => {
					fetchSchedulesWithRelations();
				}
			}
		});
	};

	/**
	 * 日期格式化：将任意日期字符串转为 YYYY-MM-DD
	 * @param {string} dateStr - 原始日期字符串
	 * @returns {string} 格式化后的日期
	 */
	const formatDate = (dateStr) => {
		if (!dateStr) return '';
		const date = new Date(dateStr);
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');
		return `${year}-${month}-${day}`;
	};
</script>

<style scoped>
	/* 页面容器基础样式 */
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 100rpx;
		/* 底部留空，避免内容被添加按钮遮挡 */
	}

	/* 顶部搜索栏样式 */
	.search-container {
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.03);
		/* 轻微阴影增强层次感 */
	}

	.search-box {
		display: flex;
		align-items: center;
		background-color: #f0f0f0;
		border-radius: 60rpx;
		/* 圆形搜索框 */
		padding: 12rpx 30rpx;
	}

	.search-input {
		flex: 1;
		/* 输入框占满剩余空间 */
		margin-left: 15rpx;
		font-size: 28rpx;
		height: 40rpx;
		line-height: 40rpx;
		color: #333;
		background: transparent;
		/* 清除默认背景 */
		border: none;
		/* 清除默认边框 */
		outline: none;
		/* 清除聚焦外边框 */
	}

	.search-input::placeholder {
		color: #999;
		/* 占位符灰色 */
	}

	/* 筛选栏样式（日期筛选按钮 + 状态下拉框） */
	.filter-bar {
		display: flex;
		align-items: center;
		padding: 15rpx 20rpx;
		background-color: #fff;
		border-top: 1px solid #eee;
		/* 顶部分隔线 */
	}

	.filter-btn {
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		color: #666;
		font-size: 26rpx;
		padding: 8rpx 20rpx;
		border-radius: 40rpx;
		/* 圆角按钮 */
		margin-right: 15rpx;
		border: none;
		/* 清除默认按钮边框 */
		outline: none;
		/* 清除聚焦外边框 */
	}

	/* 状态筛选下拉框容器 */
	.status-filter-box {
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		color: #666;
		font-size: 26rpx;
		padding: 8rpx 20rpx;
		border-radius: 40rpx;
	}

	/* 下拉框样式 */
	.status-picker {
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
	}

	.picker-display {
		display: flex;
		align-items: center;
		padding-right: 5rpx;
	}

	.down-icon {
		margin-left: 8rpx;
		transition: transform 0.2s ease;
		/* 下拉图标过渡动画 */
	}

	/* 图标通用右间距 */
	.icon-mr {
		margin-right: 8rpx;
	}

	/* 日程列表容器 */
	.schedule-list {
		padding: 20rpx;
	}

	/* 单个日程项样式 */
	.schedule-item {
		background-color: #fff;
		border-radius: 20rpx;
		/* 圆角卡片 */
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		/* 卡片阴影 */
		transition: box-shadow 0.2s ease;
		/*  hover 阴影过渡 */
	}

	.schedule-item:hover {
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.08);
		/*  hover 增强阴影 */
	}

	/* 日程项头部（日期 + 状态） */
	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25rpx;
	}

	.item-date {
		font-size: 32rpx;
		font-weight: 600;
		/* 日期加粗 */
		color: #333;
	}

	/* 状态标签样式 */
	.item-status {
		padding: 5rpx 15rpx;
		border-radius: 20rpx;
		/* 圆形标签 */
		font-size: 24rpx;
		font-weight: 500;
	}

	/* 待处理状态样式 */
	.status-pending {
		background-color: #fff3cd;
		color: #fd7e14;
	}

	/* 已完成状态样式 */
	.status-completed {
		background-color: #d1e7dd;
		color: #198754;
	}

	/* 日程项内容区（宠物信息 + 备注） */
	.item-content {
		border-left: 4rpx solid #42b983;
		/* 左侧绿色竖线标识 */
		padding-left: 20rpx;
		margin-bottom: 25rpx;
	}

	/* 宠物信息样式 */
	.pet-info {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		font-size: 28rpx;
		color: #666;
	}

	/* 备注信息样式 */
	.notes {
		display: flex;
		align-items: flex-start;
		/* 备注文字顶部对齐 */
		margin-bottom: 15rpx;
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		/* 行高优化，提升多行备注可读性 */
	}

	/* 日程项底部（操作按钮） */
	.item-footer {
		display: flex;
		justify-content: flex-end;
		/* 操作按钮右对齐 */
		align-items: center;
		font-size: 24rpx;
		color: #999;
	}

	/* 操作按钮容器 */
	.item-actions {
		display: flex;
		gap: 10rpx;
		/* 按钮间距 */
	}

	/* 操作按钮通用样式 */
	.action-btn {
		font-size: 24rpx;
		padding: 8rpx 20rpx;
		border-radius: 15rpx;
		/* 圆角按钮 */
		border: none;
		outline: none;
		transition: background-color 0.2s ease;
		/* 背景色过渡 */
	}

	/* 编辑按钮样式 */
	.edit-btn {
		background-color: #e3f2fd;
		color: #1976d2;
	}

	.edit-btn:hover {
		background-color: #bbdefb;
		/*  hover 加深背景 */
	}

	/* 状态切换按钮样式 */
	.status-btn {
		background-color: #e8f5e9;
		color: #2e7d32;
	}

	.status-btn:hover {
		background-color: #c8e6c9;
		/*  hover 加深背景 */
	}

	/* 空状态样式（无日程时显示） */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		color: #ccc;
	}

	.empty-text {
		margin-top: 30rpx;
		font-size: 30rpx;
		color: #999;
	}

	.empty-desc {
		margin-top: 15rpx;
		font-size: 26rpx;
		color: #bbb;
	}

	/* 底部添加按钮样式 */
	.add-btn {
		position: fixed;
		bottom: 40rpx;
		right: 40rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		/* 圆形按钮 */
		background-color: #42b983;
		/* 主题绿色 */
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 5rpx 15rpx rgba(66, 185, 131, 0.4);
		/* 按钮阴影 */
		border: none;
		outline: none;
		transition: all 0.2s ease;
		/* 点击过渡效果 */
	}

	.add-btn:active {
		transform: scale(0.95);
		/* 点击时缩小，模拟按压效果 */
		box-shadow: 0 3rpx 10rpx rgba(66, 185, 131, 0.3);
		/* 点击时阴影减弱 */
	}

	/* 适配小程序下拉框默认样式（避免原生样式冲突） */
	picker {
		width: auto;
		height: auto;
		color: inherit;
		font-size: inherit;
	}

	picker::selection {
		background: transparent;
	}
</style>